<template>
  <section class="relative m-h-full bg-[#0f1419] text-white overflow-hidden sm:pl-[10%] md:pl-[15%] lg:pl-[20%]">
    <div class="m-h-full relative z-10">
      <!-- 小标题 精英团队 -->
      <div class="mt-10 md:mt-14">
        <span class="inline-block backdrop-blur text-xg md:text-xl font-semibold">精英团队</span>
      </div>

      <!-- 主布局：左列整屏大图（贯穿两行），右列上文案 + 下红卡 -->
      <div class="mt-4 grid grid-cols-1 lg:grid-cols-[1fr_2fr] items-stretch">
        <!-- 左：整列一张大图（贯穿全高） -->
        <div class="overflow-hidden max-w-full max-h-full w-auto h-auto lg:h-screen">
          <img
            src="~/assets/images/bg_1.webp"
            alt="Team Primary"
            class="w-full h-full object-cover" />
        </div>

        <!-- 右列：总高度与左图一致（lg:h-screen），上文案 + 下图文二列 -->
        <div class="flex flex-col gap-10 lg:h-screen">
          <!-- 右上：创意总监介绍 -->
          <div class="space-y-6 pl-10">
            <h2 class="text-[1rem] font-extrabold">Daisy</h2>
            <div class="text-white/70 text-[0.6rem]">创意中心总监</div>
            <p class="text-white/65 leading-8 max-w-[620px] text-[0.5rem]">
              请输入要描述的内容进行内容补充，请输入要描述的内容进行内容补充，
              请输入要描述的内容进行内容补充，请输入要描述的内容进行内容补充，
              请输入要描述的内容进行内容补充，请输入要描述的内容进行内容补充。
            </p>

          </div>

          <!-- 右下：二列（左小图 + 右红卡），自适应占满剩余高度 -->
          <div class="grid grid-cols-[1fr_2fr] md:grid-cols-[1fr_2fr] flex-1 min-h-[260px]">
            <!-- 小图 -->
            <div class="overflow-hidden h-[220px] md:h-auto">
              <img
                src="~/assets/images/bg_2.jpg"
                alt="Team Secondary"
                class="w-full h-full object-cover" />
            </div>
            <!-- 红卡 -->
            <div class="overflow-hidden flex">
              <div class="bg-[#d34535] p-8 md:p-10 lg:p-12 flex flex-col flex-1">
                <h3 class="text-lg md:text-[1rem] font-bold mb-4">Johnson</h3>
                <div class="text-white/90 mb-6 text-[0.6rem]">市场运营总监</div>
                <div class="space-y-4 text-white/90 leading-relaxed text-[0.5rem]">
                  <p>请输入要描述的内容进行内容补充， 请输入要描述的内容进行内容补充。
                  请输入要描述的内容进行内容补充， 请输入要描述的内容进行内容补充， 请输入要描述的内容进行内容补充。</p>
                </div>
                <div class="mt-auto pt-6 text-white/85 text-sm tracking-widest">04</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// 人物图片已改为占位框，需要时直接替换为实际 <img> 或背景图
</script>

<style scoped>
</style>


